import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import style from './index.css'
import { connect } from 'react-redux'
import { toggleShowLoginBox, setCookieAct, setLoginStatusAct, setProfileAct } from "@/redux/actions";
import { userLevelReq } from '@/utils/api/user'
import { hotActilistsReq, hotDjListReq } from '@/utils/api/recommend'

const TopLogin = ({ toggleShow, userinfo }) => {
  const [level, setLevel] = useState(1)

  useEffect(() => {
    const getData = async () => {
      const res = await userLevelReq({ token: true })
      console.log(res.data, 'res.data')
      if (res.data.code === 200) {
        setLevel(res.data.data.level)
      }
    }

    getData()
  }, [])

  let u = userinfo.profile
  if (!userinfo.isLogin) {
    return <div className={style.topLogin}>
      <div className={style.loginContent}>登录网易云音热，可以享受无限收藏的乐趣，并且同步到手机</div>
      <button className={style.userLoginbtn} onClick={toggleShow}>用户登录</button>
    </div>
  } else {
    return <div className={style.userinfo}>
      <div className={style.userheader}>
        <div className={style.userleft}>
          <img src={userinfo.profile.avatarUrl} alt="avatarUrl" />
        </div>
        <div className={style.userright}>
          <h4 className={style.username}>{u.nickname}</h4>
          <div className={style.userlevel}>LV.{level}</div>
          <div className={style.userbtn}>签到</div>
        </div>
      </div>
      <div className={style.userbody}>
        <div className={style.useritem}>
          <h2 className={style.uitemnum}>{u.accountStatus}</h2>
          <h5 className={style.uitemtext}>动态</h5>
        </div>
        <div className={style.useritem}>
          <h2 className={style.uitemnum}>{u.follows}</h2>
          <h5 className={style.uitemtext}>关注</h5>
        </div>
        <div className={style.useritem}>
          <h2 className={style.uitemnum}>{u.followeds}</h2>
          <h5 className={style.uitemtext}>粉丝</h5>
        </div>
      </div>
    </div>
  }

}
const RightOther = () => {
  const [reshotActilList, setReshotactilList] = useState(false)
  const [reshotDjList, setReshotDjList] = useState(false)

  useEffect(() => {
    const getData = async () => {
      const reshotActil = await hotActilistsReq()
      console.log(reshotActil, 'reshotActil');
      if (reshotActil.data.code === 200) {
        try {
          let list = reshotActil.data.artists.splice(16, 5)
          setReshotactilList(list)
        } catch (err) {
          console.log(err, 'err');
          setReshotactilList([])
        }
      }
      const reshotDj = await hotDjListReq()
      console.log(reshotDj, 'reshotDj');
      if (reshotDj.data.code === 200){
        try {
          let list = reshotDj.data.data.list.splice(21, 5)
          setReshotDjList(list)
        } catch (err) {
          console.log(err, 'err');
          setReshotDjList([])
        }
      }
    }

    getData()
  }, [])

  return <div className={style.rightOther}>
    {reshotActilList ? <div className={style.otherItem}>
      <div className={style.otherTop}>
        <div className={style.topLeft}>入驻歌手</div>
        <Link className={style.topRight} to="#">查看全部</Link>
      </div>
      <div className={style.otherBody}>
        {console.log(reshotActilList, 'reshotActilList')}
        {reshotActilList.map((item, index) => {
          return <div className={style.ruzhuItem} key={index}>
            <img className={style.ruzhuLeft} src={item.img1v1Url} alt="5931865232210340" />
            <div className={style.ruzhuRight}>
              <Link to="#" className={style.rzMusician}>{item.name}</Link>
              <Link to="#" className={style.musicianDesc}>{item.alias.length > 0 ? item.alias[0] : null}</Link>
            </div>
          </div>
        })}
      </div>
    </div> : null}
    <button className={style.joinNeteasecloud}>申请成为网易音热人</button>
    {reshotDjList ? <div className={style.otherItem} style={{ marginTop: '20px' }}>
      <div className={style.otherTop}>
        <div className={style.topLeft}>热门主播</div>
      </div>
      <div className={style.otherBody}>
        {reshotDjList.map((item, index) => {
          return <div className={style.remenItem} key={index}>
            <div className={style.remenLeft}>
              <img src={item.avatarUrl} alt={item.nickName} />
            </div>
            <div className={style.remenRight}>
              <Link to="#" className={style.remenName}>{item.nickName}</Link>
              <div className={style.remenDesc}>关注人数: {item.userFollowedCount}</div>
            </div>
          </div>
        })}
      </div>
    </div> : null }
  </div>
}

function RightRecommendContainer({ toggleShow, userinfo, setCookie, setLogin, setProfile }) {
  useEffect(() => {
    // document.body.style = `overflow-x: hidden;width: 100%;`

    const cookie = localStorage.getItem('login_cookie_in_net_ease_music')
    const profile = JSON.parse(localStorage.getItem('userprofile_in_net_ease_music'))
    if (cookie) {
      setCookie(cookie)
      setLogin(true)
      setProfile(profile)
    }
  }, [userinfo.isLogin])

  return (
    <div style={{ height: 'auto', borderLeft: '1px solid #bbb', borderRight: '1px solid #bbb' }}>
      <TopLogin toggleShow={toggleShow} userinfo={userinfo} />
      <RightOther />
    </div>
  )
}

const mapPropsToStates = (state) => {
  return {
    userinfo: state.userinfo
  }
}
const mapPropsToDispath = (dispatch) => {
  return {
    toggleShow: () => {
      dispatch(toggleShowLoginBox());
    },
    setCookie: (cookie) => {
      dispatch(setCookieAct(cookie))
    },
    setLogin: (isLogin) => {
      dispatch(setLoginStatusAct(isLogin))
    },
    setProfile: (data) => {
      dispatch(setProfileAct(data))
    }
  }
}
export default connect(mapPropsToStates, mapPropsToDispath)(RightRecommendContainer)